<template>
  <div>
        <!-- <el-form ref="form" :inline="true" :model="form" >
          <div class="chaxuntiaojian">
          <el-form-item label="设备连接状态">
            <el-select v-model="form.tableinput1" size="mini" clearable placeholder="请选择设备连接状态">
              <el-option label="离线" :value="0"></el-option>
              <el-option label="在线" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备运行状态">
            <el-select v-model="form.tableinput2" size="mini" clearable placeholder="请选择设备运行状态">
              <el-option label="停止" :value="0"></el-option>
              <el-option label="运行" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备报警状态">
            <el-select v-model="form.tableinput3" size="mini" clearable placeholder="请选择设备报警状态">
              <el-option label="无报警" :value="0"></el-option>
              <el-option label="报警" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button size="mini" @click="getDevList()">查询</el-button>
          </el-form-item>
        </div>
        </el-form> -->
        
    <!-- <el-input v-model="tableinput"  clearable placeholder="请输入设备名称"></el-input> -->

    <el-table ref="dormitoryTable" :data="tableDataformSearch" highlight-current-row style="width: 100%;">
      <!-- <el-table-column class="ccc" type="selection" width="55" label="全选"></el-table-column> -->
      <!-- <el-table-column prop="xqName" label="项目名称"></el-table-column>
        <el-table-column prop="sectionName" label="区域名称"></el-table-column> -->
      <el-table-column prop="deviceName" align="center" label="设备名称"></el-table-column>
      <el-table-column prop="location" align="center" label="位置" v-if="$route.path === '/iot_sense'">
        <template slot-scope="scope">
        <el-button v-if="!scope.row.location && !scope.row.flag" type="primary" size="small" @click="editChildName(scope.row)">编辑</el-button>
        <div v-if="scope.row.location && !scope.row.flag" @click="editChildName(scope.row)">{{ scope.row.location }}</div>
        <el-input ref="inputRef" v-if="scope.row.flag" v-model="scope.row.location" size="small" clearable @blur="submitChildName(scope.row)" @keyup.enter.native="submitChildName(scope.row)"></el-input>
      </template>
      </el-table-column>
      <!-- <el-table-column prop="subsystemName" label="所属子系统名称"></el-table-column> -->
      <el-table-column prop="subsystemName" align="center" label="所属子系统名称"></el-table-column>
      <!-- <el-table-column prop="message" align="center" label="设备状态" v-if="$route.path === '/iot_vscs'"></el-table-column> -->
      <el-table-column prop="connectionState" align="center" label="设备状态">
        <template slot-scope="scope">
          <span v-if="scope.row.connectionState==1" style="color: red;">离线</span>
          <span v-if="scope.row.connectionState==0" style="color: green;">在线</span>
        </template>
      </el-table-column>
      <!-- <el-table-column :filters="[{text:'停止',value:0},{text:'运行',value:1}]" :filtered-value="filteredValue" :filter-method="filterRunState" prop="runState" align="center" label="设备运行状态" width="120px">
        <template slot-scope="scope">
          <span v-if="scope.row.runState==1" style="color: red;">停止</span>
          <span v-if="scope.row.runState==0" style="color: green;">运行</span>
        </template>
      </el-table-column> -->
      <el-table-column  :filters="[{text:'正常',value:0},{text:'报警',value:1},{text:'暂无',value:null}]" :filter-method="filterAlarmState" prop="alarmState" align="center" label="设备报警状态">
        <template slot-scope="scope">
          <!-- {{scope.row.alarmState==0?'无报警':scope.row.alarmState==1?'报警':'暂无报警状态'}} -->
          <span v-if="scope.row.alarmState==0" style="color: red;">正常</span>
          <span v-if="scope.row.alarmState==1" style="color: green;">报警</span>
          <span v-if="scope.row.alarmState==null" >暂无报警状态</span>
        </template>
      </el-table-column>

      <el-table-column label="图片" align="center" width="">
        <template slot-scope="scope">
          <span>
            <el-popover placement="left" trigger="click" width="500">
              <img :src="scope.row.photoUrl" width="100%" />
              <img slot="reference" :src="scope.row.photoUrl" :alt="scope.row.photoUrl"
                style="max-height: 50px;max-width: 100px; padding: 5px" />
            </el-popover>
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间">
        <template slot-scope="scope">
          {{$root.getDateArray(scope.row.createTime)[9]}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" v-if="$route.path === '/iot_vscs'">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="monitoring(scope.row,0)">实时监控</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="refUrl" label="设备地址"></el-table-column> -->
    </el-table>
    <el-pagination
    layout="prev, pager, next"
    :total="total"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    >
  </el-pagination>


    <el-dialog title="监控" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" class="milogs">
      <!-- <span>视频监控</span> -->
      <Control :monitoringData="monitoringData" :dialogVisible="dialogVisible" :getplayMode="getplayMode" :monitorDeviceNo="monitorDeviceNo"></Control>

      <div class="ptz">
        <div class="outer-ring">
            <!-- 上 -->
            <i class="caret-up el-icon-caret-top" @mousedown="ptzController('UP')" @mouseup="SptzController('UP')" />
            <!-- 下 -->
            <i class="caret-down el-icon-caret-bottom" @mousedown="ptzController('DOWN')" @mouseup="SptzController('DOWN')" />
            <!-- 左 -->
            <i class="caret-left el-icon-caret-left" @mousedown="ptzController('LEFT')" @mouseup="SptzController('LEFT')" />
            <!-- 右 -->
            <i class="caret-right el-icon-caret-right" @mousedown="ptzController('RIGHT')" @mouseup="SptzController('RIGHT')" />
            <div class="inner-ring">
                <i class="plus el-icon-plus" @mousedown="ptzController('ZOOM_IN')" @mouseup="SptzController('ZOOM_IN')" />
                <div class="line"></div>
                <i class="minus el-icon-minus" @mousedown="ptzController('ZOOM_OUT')" @mouseup="SptzController('ZOOM_OUT')" />
            </div>
            <!-- 左上 -->
            <i class="ob-caret-left el-icon-caret-left" @mousedown="ptzController('LEFT_UP')" @mouseup="SptzController('LEFT_UP')" />
            <!-- 右上 -->
            <i class="ob-caret-up el-icon-caret-top" @mousedown="ptzController('RIGHT_UP')" @mouseup="SptzController('RIGHT_UP')" />
            <!-- 右下 -->
            <i class="ob-caret-right el-icon-caret-right" @mousedown="ptzController('LEFT_DOWN')" @mouseup="SptzController('LEFT_DOWN')" />
            <!-- 左下 -->
            <i class="ob-caret-down el-icon-caret-bottom" @mousedown="ptzController('RIGHT_DOWN')" @mouseup="SptzController('RIGHT_DOWN')" />
        </div>
       </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
      </span>
    </el-dialog>

  </div>

</template>

<script>
  import Control from "../player/consoleControl copy.vue"
  // import Control from "../player/consoleControl.vue"
  import {updateSense,getLiveMonitoring,doHkControl } from '../../url/api'
  export default {
    props: ['devicedata'],
    components: {
      Control,
    },
    data() {
      return {
        getplayMode:0,
        form:{
          tableinput1: '',
          tableinput2: '',
          tableinput3: '',
        },
        filteredValue:[],
        tableData: this.devicedata,
        tableDataformSearch: [],
        dialogVisible: false,
        monitoringData: {},
        total:0,
        currentPage:1,
        pageSize: 10,
        monitorDeviceNo:''
      }
    },
    methods: {
      ptzController(situation){
        console.log('触发');
        let params = {
          cameraIndexCode:this.monitorDeviceNo,
          action:0,
          command:situation
        }
        doHkControl(params).then((res) => {
                        if (res.data.ok) {
                            console.log(res);
                        }
                    });
      },
      SptzController(situation){
        console.log('停止');
        let params = {
          cameraIndexCode:this.monitorDeviceNo,
          action:1,
          command:situation
        }
        doHkControl(params).then((res) => {
                        if (res.data.ok) {
                            console.log(res);
                        }
                    });
      },
      editChildName(row) {
         row.flag = true
        this.$nextTick(() => {
          // console.log(this.$refs.inputRef);
      this.$refs.inputRef.focus()
    });
    },
    submitChildName(row) {
        console.log(row);
        let params = {
          devId: row.deviceId,
          location: row.location
        }
        updateSense(params).then((res) => {
                        if (res.data.ok) {
                            console.log(res);
                            row.flag = false
                        }
                    });
    },
      getDevList(){
        this.filteredValue[0] = this.form.tableinput2;
        this.$refs.dormitoryTable.columns[2].filteredValue = [this.Watch];
        // this.filterRunState();
      },
      filterHandler(value, row, column) {
        // console.log(column,"AAAAAAAAAAAAAAAAAAAAAAA",value);
        const property = column['property'];
        return row[property] === value;
      },
      filterRunState(value, row){
        return row.runState === value;
      },
      filterAlarmState(value, row){
        return row.alarmState === value;
      },
      
      handleClose() {
        this.dialogVisible = false;
        this.monitoringData = {}
        this.monitorDeviceNo = ''

      },
      monitoring(row,mode) {
        console.log(row, "监控数据");
        this.monitoringData = row;
        this.monitorDeviceNo = row.extra;
        this.getplayMode = mode
        this.dialogVisible = true
      },
      handleCurrentChange(page) {
      this.currentPage = page;
      this.updateTableDataformSearch();
    },
    updateTableDataformSearch() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      this.tableDataformSearch = this.tableData.slice(startIndex, endIndex);
      
      // if(this.$route.path == '/iot_vscs'){
      //   this.tableDataformSearch.forEach((item, index) => {
      //   getLiveMonitoring(item.extra).then((res) => {
      //     if (res.data.ok) {
      //             console.log(res.data.message);
      //             // item.message = res.data.message
      //             this.$set(this.tableDataformSearch, index, Object.assign({}, item, { message: res.data.message }));
      //             return item
      //         }
      //     });
      //   });

      //   console.log(this.tableDataformSearch);
      // }
      

    },
    },
    mounted() {
      this.tableData = JSON.parse(sessionStorage.getItem('devicedata'));
      this.total = this.tableData.length
      this.updateTableDataformSearch();
    },
    computed:{
    },
    watch: {
      devicedata(val) {
        this.tableData = val
        this.tableData = val.map(item =>{
                      return  {
                        ...item,
                        flag:false
                        }
                    })
        this.tableDataformSearch = this.tableData;
        // console.log("表格");
      },
    },
  }
</script>
<style lang="scss">
  .chaxuntiaojian{
    display: flex;
    justify-content: space-evenly;
  }
  .el-pagination{
    margin-top: 20px;
    text-align: center;
  }

  .ptz {
        width: 264px;
        display: flex;
        justify-content: space-around;

        .outer-ring {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;

            i {
                font-size: 30px;
                cursor: pointer;

                &:hover {
                    color: #00B176;
                }
            }

            .caret-up {
                position: absolute;
                top: 6px;
                left: 95px;
                margin-left: -10px;
            }

            .caret-down {
                position: absolute;
                bottom: 6px;
                left: 95px;
                margin-left: -10px;
            }

            .caret-left {
                position: absolute;
                left: 6px;
                top: 95px;
                margin-top: -10px;
            }

            .caret-right {
                position: absolute;
                right: 6px;
                top: 95px;
                margin-top: -10px;
            }

            .ob-caret-left {
                transform: rotate(45deg);
                position: absolute;
                top: 30px;
                left: 24px;
            }

            .ob-caret-up {
                transform: rotate(45deg);
                position: absolute;
                top: 30px;
                right: 24px;
            }

            .ob-caret-right {
                transform: rotate(45deg);
                position: absolute;
                bottom: 30px;
                right: 24px;
            }

            .ob-caret-down {
                transform: rotate(45deg);
                position: absolute;
                bottom: 30px;
                left: 24px;
            }

            .inner-ring {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 80px;
                height: 80px;
                border-radius: 50%;
                background-color: #fff;
                border: 1px solid #ddd;

                .plus {
                    position: absolute;
                    top: 5px;
                    left: 35px;
                    margin-left: -10px;
                }

                .line {
                    height: 1px;
                    width: 100%;
                    background-color: #ddd;
                    position: absolute;
                    top: 39px;
                    left: 0;
                }

                .minus {
                    position: absolute;
                    bottom: 5px;
                    left: 35px;
                    margin-left: -10px;
                }
            }
        }
    }
    .el-dialog__body{
      display: flex !important;
      align-items: center;
    }
</style>